
<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <el-form :inline="true" class="demo-form-inline filter">
      <el-form-item label="地点">
        <div style="display:flex;justify-content:flex-start;align-items:center">
          <el-select
            v-model="listQuery.fpointNo"
            style="display: inline-block;"
            clearable
            filterable
            class="filter-item"
            placeholder="请选择地点"
            @focus="fpointNoFocus"
            @change="fpointNoChange">
            <el-option v-for="item in getListfpointNoQuery" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
      </el-form-item>
      <el-form-item label="设备MAC">
        <el-input
          v-model="listQuery.deviceNo"
          clearable
          class="filter-item"
          style="width: 260px"
          placeholder="请输入设备MAC" />
      </el-form-item>
      <!-- <el-form-item label="时间">
      <input type="date" v-model="listQuery.start">
    </el-form-item>-->
      <el-form-item>
        <el-button
          :style="{ background: buttonColor.edit, color: buttonColor.color }"
          round
          size="medium"
          class="filter-item"
          @click="handleFilter">查找</el-button>
        <el-button
          :style="{ background: buttonColor.add, color: buttonColor.color }"
          round
          size="medium"
          class="filter-item"
          @click="adddata">添加</el-button>
      </el-form-item>
    </el-form>

    <!-- 查询结果 -->
    <el-table
      v-loading="listLoading"
      :height="buttonColor.clientHeight"
      :data="list"
      :header-cell-style="tableColor"
      stripe
      element-loading-text="正在查询中。。。"
      border
      fit
      highlight-current-row>
      <el-table-column :width="buttonColor.line" :index="indexMethod" align="center" label="序" type="index" />
      <el-table-column align="left" label="地点名称" prop="fpointName" />
      <el-table-column align="left" label="设备名称" prop="fequipmenttag">
        <template slot-scope="scope">
          <span v-if="scope.row.fequipmenttag == '' || scope.row.fequipmenttag == null">--</span>
          <span v-else>{{ scope.row.fequipmenttag }}</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="设备MAC" prop="deviceNo">
        <template slot-scope="scope">
          <span v-if="scope.row.deviceNo == '' || scope.row.deviceNo == null">--</span>
          <span v-else>{{ scope.row.deviceNo }}</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="用户名" prop="cardName">
        <template slot-scope="scope">
          <span v-if="scope.row.cardName == '' || scope.row.cardName == null">--</span>
          <span v-else>{{ scope.row.cardName }}</span>
        </template>
      </el-table-column>

      <el-table-column align="left" label="卡号" prop="cardNo">
        <template slot-scope="scope">
          <span v-if="scope.row.cardNo == '' || scope.row.cardNo == null">--</span>
          <span v-else>{{ scope.row.cardNo }}</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="密码进入" prop="cardPasswd">
        <template slot-scope="scope">
          <span v-if="scope.row.cardPasswd == '' || scope.row.cardPasswd == null">--</span>
          <span v-else>{{ scope.row.cardPasswd }}</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="是否人脸" prop="faceUrl">
        <template slot-scope="scope">
          <span v-if="scope.row.faceUrl == '' || scope.row.faceUrl == null">否</span>
          <span v-else>是</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="人脸照片" prop="faceUrl">
        <template slot-scope="scope">
          <span v-if="scope.row.faceUrl == '' || scope.row.faceUrl == null">--</span>
          <img v-else :src="scope.row.faceUrl" style="width:50px">
        </template>
      </el-table-column>
      <el-table-column align="left" label="状态" prop="cardStatus">
        <template slot-scope="scope">
          <span>{{ getcardstatus(scope.row.cardStatus) }}</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="有效期开始" prop="startTime" />
      <el-table-column align="left" label="有效期结束" prop="endTime" />
      <el-table-column align="left" label="操作" prop="">
        <template slot-scope="scope">
          <span style="color: cadetblue;cursor: pointer;" @click="synchronization(scope.row)">同步</span>
          <span style="color: #03a9f4;cursor: pointer;" @click="editdata(scope.row)">编辑</span>

          <span style="color: cadetblue;cursor: pointer;" @click="deletes(scope.row)">删除</span>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList" />

    <!-- 添加 -->
    <el-dialog :close-on-click-modal="false" :visible.sync="dialogFormVisible" width="auto" top="2vh">
      <template slot="title">
        <div :style="titleColor">{{ textMap[dialogStatuses] }}</div>
      </template>
      <el-form ref="userinfo" :rules="rules" :model="userinfo" status-icon label-position="left" label-width="90px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户名" prop="cardName">
              <el-input v-model="userinfo.cardName" />
            </el-form-item>
            <el-form-item label="密码进入" prop="cardPasswd">
              <el-input v-model="userinfo.cardPasswd" type="text" onkeyup="value = value.replace(/[^\d]/g,'')" />
            </el-form-item>
            <el-form-item label="卡类型" prop="fpointSize">
              <div style="display:flex;justify-content:flex-start;align-items:center">
                <el-select
                  v-model="userinfo.cardType"
                  style="display: inline-block"
                  clearable
                  filterable
                  class="filter-item"
                  placeholder="请选择类型">
                  <el-option v-for="item in cardtypes" :key="item.value" :label="item.lable" :value="item.value" />
                </el-select>
              </div>
            </el-form-item>
            <el-form-item label="是否有效" prop="fpointSize">
              <div style="display:flex;justify-content:flex-start;align-items:center">
                <el-select
                  v-model="userinfo.enable"
                  style="display: inline-block"
                  clearable
                  filterable
                  class="filter-item"
                  placeholder="请选择状态">
                  <el-option v-for="item in valids" :key="item.value" :label="item.lable" :value="item.value" />
                </el-select>
              </div>
            </el-form-item>

            <!-- <el-form-item label="人脸照片" prop="faceUrl">
              <el-input v-model="userinfo.faceUrl" />
            </el-form-item> -->

            <el-form-item label="人脸的照片(2M内)" prop="fimage">
              <el-upload
                v-model="dataForm.fimage"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                :action="uploadPath"
                :data="formdata2(dataForm.fpointNo)"
                class="avatar-uploader">
                <img v-if="dataForm.fimage" :src="dataForm.fimage" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
            </el-form-item>

            <el-form-item label="有效期开始" prop="fpointSize">
              <el-input v-model="userinfo.startTime" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="卡号" prop="cardNo">
              <el-input v-model="userinfo.cardNo" />
            </el-form-item>
            <el-form-item label="卡状态" prop="fpointSize">
              <div style="display:flex;justify-content:flex-start;align-items:center">
                <el-select
                  v-model="userinfo.cardStatus"
                  style="display: inline-block"
                  clearable
                  filterable
                  class="filter-item"
                  placeholder="请选择状态">
                  <el-option v-for="item in cardStatuses" :key="item.value" :label="item.lable" :value="item.value" />
                </el-select>
              </div>
            </el-form-item>

            <el-form-item label="设备序列号" prop="deviceNo">
              <el-input v-model="userinfo.deviceNo" />
            </el-form-item>

            <el-form-item label="使用次数" prop="useTimes">
              <el-input v-model="userinfo.useTimes" />
            </el-form-item>

            <el-form-item label="是否首卡" prop="fpointSize">
              <div style="display:flex;justify-content:flex-start;align-items:center">
                <el-select
                  v-model="userinfo.firstEnter"
                  style="display: inline-block"
                  clearable
                  filterable
                  class="filter-item"
                  placeholder="请选择状态">
                  <el-option v-for="item in valids" :key="item.value" :label="item.lable" :value="item.value" />
                </el-select>
              </div>
            </el-form-item>
            <el-form-item label="有效期结束" prop="endTime">
              <el-input v-model="userinfo.endTime" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          :style="{ background: buttonColor.cancel, color: buttonColor.colorone }"
          round
          @click="dialogFormVisible = false">取消</el-button>
        <el-button
          v-if="dialogStatuses == 0"
          :style="{ background: buttonColor.confirm, color: buttonColor.color }"
          round
          @click="createData">确定</el-button>
        <el-button
          v-else
          :style="{ background: buttonColor.confirm, color: buttonColor.color }"
          round
          @click="updateData">更新</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<style>
.button-margin {
  margin: 2px 0px;
}

.el-button+.el-button {
  margin-left: 1px;
}

.el-table .cell {
  text-align: center;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
/*处理input type = number的上下箭头*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

input[type="number"] {
  -moz-appearance: textfield;
}
</style>

<script>
import { getPointOptions } from '@/api/area'
import Pagination from '@/components/Pagination'
import moment from 'moment'
import { tableColor, titleColor, buttonColor } from '@/filters/index'
import { faceCardlist, faceCardadd, faceCardUpdate, faceCardgetEquipmentUSer, faceCarddelete } from '@/api/safetyManagement'

import { listRoom, createRoom, updateRoom, deleteRoom, uploadPath } from '@/api/room'

export default {
  name: 'OrderInfo',
  components: { Pagination },
  data() {
    return {
      buttonColor: buttonColor,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        deviceNo: '',
        fsiteNo: '', // 客户编号
        fpointNo: '' // 房间编号
        // end: undefined,
        // start: undefined,
      },
      uploadPath,
      dialogStatuses: 0, // 0添加  1编辑
      textMap: ['添加', '编辑'],
      dialogFormVisible: false, // 添加弹窗
      // 用户字段
      userinfo: {
        deviceNo: null, // 设备mac
        cardName: null, // 卡名
        cardNo: null, // 卡号
        cardPasswd: null, // 密码
        cardStatus: null, // 状态
        cardType: null, // 卡类型
        enable: null, // 是否有效
        endTime: null, // 有效期结束
        faceUrl: null, // 人脸图片
        firstEnter: null, // 是否首卡
        recordNo: null, // 记录集编号，修改，删除卡信息必须填写
        startTime: null, // 有效期开始
        useTimes: null, // 使用次数
        userId: null
      },
      getListfpointNoQuery: null, // 地点
      dataForm: {
        fimage: undefined,
        fpointNo: undefined,
        fpointFlag: undefined
      },
      // 非空判断
      rules: {
        cardName: [
          { required: true, message: '用户名不能为空', trigger: 'blur' }
        ],
        cardPasswd: [
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ],
        // faceUrl: [
        //   { required: true, message: '人脸照片不能为空', trigger: 'blur'}
        // ],
        startTime: [
          { required: true, message: '有效期开始不能为空', trigger: 'blur' }
        ],
        cardNo: [
          { required: true, message: '卡号不能为空', trigger: 'blur' }
        ],
        deviceNo: [
          { required: true, message: '设备序列号不能为空', trigger: 'blur' }
        ],
        useTimes: [
          { required: true, message: '使用次数不能为空', trigger: 'blur' }
        ],
        endTime: [
          { required: true, message: '有效期结束不能为空', trigger: 'blur' }
        ]
      },
      cardStatuses: [
        { value: -1, lable: '未知' },
        { value: 0, lable: '正常' },
        { value: 1, lable: '挂失' },
        { value: 2, lable: '注销' },
        { value: 3, lable: '冻结' },
        { value: 4, lable: '欠费' },
        { value: 5, lable: '逾期' },
        { value: 6, lable: '预欠费' }], // 卡状态
      cardtypes: [
        { value: -1, lable: '未知' }, // 卡类型
        { value: 0, lable: '普通卡' },
        { value: 1, lable: 'VIP卡' },
        { value: 2, lable: '来宾卡' },
        { value: 3, lable: '巡逻卡' },
        { value: 4, lable: '黑名单' },
        { value: 5, lable: '胁迫卡' },
        { value: 6, lable: '巡检卡' },
        { value: 7, lable: '母卡' }
      ],
      valids: [ // 是否
        { value: 0, lable: '是' },
        { value: 1, lable: '否' }
      ],
      tableColor: tableColor,
      titleColor: titleColor
    }
  },
  created() {
    this.listQuery.fsiteNo = this.$store.state.user.fsiteNo
    this.getList()
  },
  methods: {
    // 获取列表状态
    getcardstatus(row) {
      var cardStatuses = this.cardStatuses
      for (var i in cardStatuses) {
        if (cardStatuses[i].value == row) {
          return cardStatuses[i].lable
        }
      }
    },
    // 获取地点
    getListfpointNoQuerys() {
      getPointOptions(this.$store.state.user.fsiteNo)
        .then(response => {
          this.getListfpointNoQuery = response.data.data.list
        })
        .catch(() => {
          this.getListfpointNoQuery = []
        })
    },
    // 搜索地点获取焦点
    fpointNoFocus() {
      if (!this.listQuery.fsiteNo) {
        this.getListfpointNoQuery = []
      }
    },
    // 数据同步
    synchronization(row) {
      var rowjson = {}
      rowjson.deviceNo = row.deviceNo
      faceCardgetEquipmentUSer(rowjson)
        .then(response => {
          this.$notify.success({
            title: '成功',
            message: '同步成功'
          })
          this.getList()
        })
        .catch((response) => {
          this.$notify.error({
            title: '失败',
            message: response.data
          })
        })
    },
    // 删除
    deletes(row) {
      faceCarddelete(row.id)
        .then(response => {
          this.$notify.success({
            title: '成功',
            message: '删除成功'
          })
          this.getList()
        })
        .catch((response) => {
          this.$notify.error({
            title: '失败',
            message: response.data
          })
        })
    },
    // 编辑
    editdata(row) {
      console.log('row', row)
      this.dialogFormVisible = true
      this.dialogStatuses = 1
      this.userinfo = JSON.parse(JSON.stringify(row))
    },
    adddata() {
      this.dialogFormVisible = true
      this.resetForm() // 重置
      var startime = new Date()
      this.userinfo.startTime = moment(startime).format('YYYY-MM-DD HH:mm:ss')
      var date = new Date()
      date.setFullYear(date.getFullYear() + 1)
      date.setDate(date.getDate() - 1)
      this.userinfo.endTime = moment(date).format('YYYY-MM-DD HH:mm:ss')
      this.dialogStatuses = 0
    },
    // 确定
    createData() {
      console.log('userinfo', this.userinfo)
      this.userinfo.recordNo = 1
      faceCardadd(this.userinfo)
        .then(response => {
          this.dialogFormVisible = false
          this.$notify.success({
            title: '成功',
            message: '添加用户成功'
          })
          this.getList()
        })
        .catch((response) => {
          this.$notify.error({
            title: '失败',
            message: response.data
          })
        })
    },
    // 更新
    updateData() {
      faceCardUpdate(this.userinfo)
        .then(response => {
          this.$notify.success({
            title: '成功',
            message: response.data.data
          })
          this.getList()
        })

        .catch((response) => {
          this.$notify.error({
            title: '失败',
            message: response.data
          })
        })
    },

    // 获取列表数据
    getList() {
      this.getListfpointNoQuerys()
      this.listLoading = true
      var listQuery = JSON.parse(JSON.stringify(this.listQuery))
      // if (this.listQuery.start == undefined) {
      //   listQuery.end = new Date()
      //   listQuery.start = new Date()
      // }
      // listQuery.start = moment(listQuery.start).format("YYYY-MM-DD");
      // listQuery.start = moment(listQuery.start).format("YYYY-MM-DD HH:mm:ss");
      // listQuery.end = new Date(listQuery.start).getTime() + (1000 * 60 * 60 * 24);
      // this.listQuery.start = moment(listQuery.start).format("YYYY-MM-DD");
      // this.listQuery.end = moment(listQuery.end).format("YYYY-MM-DD");
      // listQuery.end = new Date(moment(listQuery.end).format("YYYY-MM-DD HH:mm:ss")).getTime();
      // listQuery.start = new Date(moment(listQuery.start).format("YYYY-MM-DD HH:mm:ss")).getTime();
      listQuery.fsiteNo = this.$store.state.user.fsiteNo
      faceCardlist(listQuery)
        .then((response) => {
          var getListfpointNoQuery = this.getListfpointNoQuery
          var responselist = JSON.parse(JSON.stringify(response.data.data.list))
          for (var i in responselist) {
            for (var s in getListfpointNoQuery) {
              if (responselist[i].fpointNo == getListfpointNoQuery[s].value) {
                responselist[i].fpointName = getListfpointNoQuery[s].label
              }
            }
            // responselist[i].stutime = moment(responselist[i].stuTime).format("YYYY-MM-DD HH:mm:ss")
            // responselist[i].uctime = moment(responselist[i].uctime).format("YYYY-MM-DD HH:mm:ss")
          }
          this.list = responselist
          this.total = response.data.data.total
          this.listLoading = false
        })
        .catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
    },
    // 搜索地点改变
    fpointNoChange(data) {
      this.printed = false
      this.isPrint = true
      if (data) {
      } else {
        this.listQuery.fpointNo = undefined
      }
    },
    // 查找
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    // 表单重置
    resetForm() {
      this.userinfo = {
        deviceNo: null, // 设备mac
        cardName: null, // 卡名
        cardNo: null, // 卡号
        cardPasswd: null, // 密码
        cardStatus: null, // 状态
        cardType: null, // 卡类型
        enable: null, // 是否有效
        endTime: null, // 有效期结束
        faceUrl: null, // 人脸图片
        firstEnter: null, // 是否首卡
        recordNo: null, // 记录集编号，修改，删除卡信息必须填写
        startTime: null, // 有效期开始
        useTimes: null, // 使用次数
        userId: null
      }
    },
    // 序号
    indexMethod(index) {
      index = index + 1
      return index
    },
    // 导入222222222222222333333333333333
    uploadFileSuccess: function(response) {
      this.uploadVisible = false
      this.$notify.success({
        title: '导入',
        dangerouslyUseHTMLString: true,
        message: response.data
      })
    },
    handleUpload() {
      this.uploadVisible = true
    },
    formdata2: function(fpointno) {
      return { 'ftype': '1', 'fpointno': fpointno }
    },
    handleAvatarSuccess(res, file) {
      // this.dataForm.fimage = URL.createObjectURL(file.raw)
      this.dataForm.fimage = res.data
      // 666666666666666666666666666666666666666
      console.log('222222444444', res.data)
      this.userinfo.faceUrl = res.data

      const time = new Date().getTime()
      this.dataForm.fimage = `${this.dataForm.fimage}?time=${time}`
    },
    beforeAvatarUpload(file) {
      // const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!')
      // }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
      }
      return isLt2M // isJPG &&
    }
    // 結束导入222222222222222333333333333333

  }
}
</script>
